import React from 'react';
import ReactDOM from 'react-dom';
import bindAll from 'lodash.bindall';
import PropTypes from 'prop-types';

import CocobitHexinban from '../../components/cocobit-preview/cocobit-hexinban.jsx';

const funStr = `async function setup() {

  await ccb.muti_led_show_with_icon("Txu");

}

async function loop() {

}`

const funStr_setup = `!async function setup() {
  // await ccb.muti_led_show_with_icon("Txu");
  // await ccb.muti_led_show_with_str("g99");
  // await ccb.muti_led_show_with_but("###..............................................");
  // await ccb.muti_led_set_flag_with_no(6, true);
  await ccb.muti_led_set_on_with_xy(6, 6);
}()`

const funStr_loop = '!function loop() {' + 
  'console.log("gg")' +
'}()'

// //核心板展示图案坐标点
// const cubePosition = [...letterPosition, ...numberPosition, ...specialCharacterPosition, ...iconPosition];

const led_highlight_origin = {
  led_0: false,
  led_1: false,
  led_2: false,
  led_3: false,
  led_4: false,
  led_5: false,
  led_6: false,
  led_7: false,
  led_8: false,
  led_9: false,
  led_10: false,
  led_11: false,
  led_12: false,
  led_13: false,
  led_14: false,
  led_15: false,
  led_16: false,
  led_17: false,
  led_18: false,
  led_19: false,
  led_20: false,
  led_21: false,
  led_22: false,
  led_23: false,
  led_24: false,
  led_25: false,
  led_26: false,
  led_27: false,
  led_28: false,
  led_29: false,
  led_30: false,
  led_31: false,
  led_32: false,
  led_33: false,
  led_34: false,
  led_35: false,
  led_36: false,
  led_37: false,
  led_38: false,
  led_39: false,
  led_40: false,
  led_41: false,
  led_42: false,
  led_43: false,
  led_44: false,
  led_45: false,
  led_46: false,
  led_47: false,
  led_48: false
}

class CCBHexinban extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      led_highlight: JSON.parse(JSON.stringify(led_highlight_origin))
    }
  }
  
  compute_led_stataus() {
    const current_letter = '%';
    const the_position = cubePosition.find((item) => {
      return item.name == current_letter;
    }).position;
    const temporary_led_highlight = JSON.parse(JSON.stringify(led_highlight_origin));
    const the_position_index = [];
    for (let i = 0; i < the_position.length; i++) {
      the_position_index.push(the_position[i].x + the_position[i].y * 7);
    }

    for (let i = 0; i < Object.keys(temporary_led_highlight).length; i++) {
      if (the_position_index.indexOf(i) > -1) {
        temporary_led_highlight["led_" + i] = true;
      } else {
        temporary_led_highlight["led_" + i] = false;
      }
    }
    this.setState({ led_highlight: temporary_led_highlight });
  }
  //处理postMessage传过来的数据
  handler_postMessage(postData){
    if(postData.action_type === 'led'){
      this.setState({ led_highlight: postData.data });
    }
  }

  componentDidMount() {
    window.addEventListener('message', e => {
      const postData = e.data;
      if(postData.type && postData.type === 'ccb_function'){
        this.handler_postMessage(postData)
      }
    }, true);
    eval(funStr_setup);
  }

  render() {
    return (
      <CocobitHexinban led_highlight={this.state.led_highlight} />
    );
  }
}
export default CCBHexinban;
